<template>
  <div>
    <div class="row">
      <hm-button @click="onClick">默认按钮</hm-button>
      <hm-button type="primary">主要按钮</hm-button>
      <hm-button type="success">成功按钮</hm-button>
      <hm-button type="info">信息按钮</hm-button>
      <hm-button type="warning">警告按钮</hm-button>
      <hm-button type="danger">危险按钮</hm-button>
    </div>
    <div class="row">
      <hm-button plain>朴素按钮</hm-button>
      <hm-button plain type="primary">主要按钮</hm-button>
      <hm-button plain type="success">成功按钮</hm-button>
      <hm-button plain type="info">信息按钮</hm-button>
      <hm-button plain type="warning">警告按钮</hm-button>
      <hm-button plain type="danger">危险按钮</hm-button>
    </div>
    <div class="row">
      <hm-button round>默认按钮</hm-button>
      <hm-button round  type="primary">主要按钮</hm-button>
      <hm-button round type="success">成功按钮</hm-button>
      <hm-button round type="info">信息按钮</hm-button>
      <hm-button round type="warning">警告按钮</hm-button>
      <hm-button round type="danger">危险按钮</hm-button>
    </div>
    <div class="row">
      <hm-button native-type="submit">原生 type 属性</hm-button>
      <hm-button native-type="submit"  type="primary">主要按钮</hm-button>
      <hm-button native-type="submit" type="success">成功按钮</hm-button>
      <hm-button native-type="submit" type="info">信息按钮</hm-button>
      <hm-button native-type="submit" type="warning">警告按钮</hm-button>
      <hm-button native-type="submit" type="danger">危险按钮</hm-button>
    </div>
    <div class="row">
      <hm-button icon="hm-icon-search"></hm-button>
      <hm-button icon="hm-icon-edit"  type="primary">dd</hm-button>
      <hm-button icon="hm-icon-search" type="success"></hm-button>
      <hm-button icon="hm-icon-search" type="info"></hm-button>
      <hm-button icon="hm-icon-search" type="warning"></hm-button>
      <hm-button icon="hm-icon-search" type="danger"></hm-button>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    onClick () {
      alert(11)
    }
  }
}
</script>
<style lang="scss" scoped>
.row {
  margin-bottom: 20px;
  .hm-button{
    margin-right: 20px;
  }
}

</style>
